<style>
    :root {
        --primary: #4267B2;
        --primary-light: #E9EBF5;
        --secondary: #1DA1F2;
        --tertiary: #25D366;
        --accent: #FF4757;
        --dark: #2D3436;
        --light: #F8F9FA;
        --gray: #636E72;
        --border: #DFE6E9;
        --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #F5F7FA;
        color: var(--dark);
        line-height: 1.6;
    }


    /* 主内容区 */
    .main-content {
        padding: 2rem 0;
    }

    /* 页面标题 */
    .page-title {
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .page-title h1 {
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--dark);
    }

    /* 内容卡片样式 */
    .content-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .content-card {
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s, box-shadow 0.3s;
        position: relative;
    }

    .content-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .content-card .card-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .content-card .card-content {
        padding: 1.25rem;
    }

    .content-card .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .content-card .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 0.75rem;
    }

    .content-card .user-info {
        flex: 1;
    }

    .content-card .user-name {
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    .content-card .post-time {
        font-size: 0.8rem;
        color: var(--gray);
    }

    .content-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .content-card .card-text {
        color: var(--gray);
        font-size: 0.9rem;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .content-card .card-stats {
        display: flex;
        justify-content: space-between;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
        font-size: 0.85rem;
        color: var(--gray);
    }

    .content-card .stat-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: color 0.2s;
    }

    .content-card .stat-item:hover {
        color: var(--primary);
    }

    .content-card .stat-item i {
        margin-right: 0.35rem;
    }

    /* 分享按钮 */
    .share-btn {
        background: none;
        border: none;
        color: var(--gray);
        cursor: pointer;
        transition: color 0.2s;
    }

    .share-btn:hover {
        color: var(--primary);
    }

    /* 分享表单模态框 */
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .modal-content .modal-header {
        border-bottom: 1px solid var(--border);
        padding: 1.25rem 1.5rem;
    }

    .modal-content .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--dark);
    }

    .modal-content .modal-body {
        padding: 1.5rem;
    }

    .modal-content .modal-footer {
        border-top: 1px solid var(--border);
        padding: 1rem 1.5rem;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    /* 分享表单样式 */
    .modal-content .share-form-group {
        margin-bottom: 1.5rem;
    }

    .modal-content .share-form-label {
        display: block;
        margin-bottom: 0.75rem;
        font-weight: 500;
        color: var(--dark);
    }

    .modal-content .share-textarea {
        width: 100%;
        min-height: 100px;
        padding: 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        resize: vertical;
        font-family: inherit;
        transition: all 0.2s;
    }

    .modal-content .share-textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--primary-light);
    }

    .modal-content .share-hint {
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--gray);
        text-align: right;
    }

    /* 分享选项 */
    .modal-content .share-options {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 0.5rem;
    }

    .modal-content .share-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70px;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .modal-content .share-option:hover {
        transform: translateY(-3px);
    }

    .modal-content .share-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        color: white;
        font-size: 1.25rem;
    }

    .modal-content .share-name {
        font-size: 0.8rem;
        color: var(--gray);
        text-align: center;
    }

    .modal-content .share-facebook {
        background-color: var(--primary);
    }

    .modal-content .share-twitter {
        background-color: var(--secondary);
    }

    .modal-content .share-whatsapp {
        background-color: var(--tertiary);
    }

    .modal-content .share-copy {
        background-color: var(--gray);
    }

    .modal-content .share-weibo {
        background-color: #E6162D;
    }

    .modal-content .share-wechat {
        background-color: #07C160;
    }

    .modal-content .share-qq {
        background-color: #12B7F5;
    }

    .modal-content .share-email {
        background-color: #7D7D7D;
    }

    /* 分享内容预览 */
    .modal-content .share-preview {
        background-color: var(--light);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .modal-content .share-preview-header {
        font-size: 0.9rem;
        color: var(--gray);
        margin-bottom: 0.75rem;
        font-weight: 500;
    }

    .modal-content .share-preview-content {
        font-size: 0.95rem;
        color: var(--dark);
    }

    /* 分享成功提示 */
    .share-toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        font-size: 0.9rem;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

    .share-toast.show {
        opacity: 1;
    }

    /* 按钮样式 */
    .btn {
        padding: 0.6rem 1.25rem;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .btn-primary:hover {
        background-color: #365899;
        border-color: #365899;
    }

    .btn-outline {
        background-color: transparent;
        border: 1px solid var(--border);
        color: var(--dark);
    }

    .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {

        .content-container {
            grid-template-columns: 1fr;
        }

        .modal-content .share-options {
            justify-content: center;
        }
    }
</style>


<div class="container main-content">
    <div class="page-title">
        <h1>推荐内容</h1>
    </div>

    <div class="content-container">
        <!-- 内容卡片 1 -->
        <div class="content-card">
            <img src="https://picsum.photos/800/600?random=10" alt="风景照片" class="card-image">
            <div class="card-content">
                <div class="card-header">
                    <img src="https://picsum.photos/100/100?random=101" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <p class="user-name">旅行爱好者</p>
                        <p class="post-time">2小时前</p>
                    </div>
                </div>

                <h3 class="card-title">分享一组令人惊叹的山川美景，大自然的鬼斧神工！</h3>
                <p class="card-text">这是我在最近的旅行中拍摄的照片，站在山顶俯瞰云海的那一刻，感觉所有的烦恼都烟消云散了...</p>

                <div class="card-stats">
                    <div class="stat-item">
                        <i class="far fa-heart"></i> 248
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i> 36
                    </div>
                    <div class="stat-item share-btn" data-bs-toggle="modal" data-bs-target="#shareModal"
                         data-title="分享一组令人惊叹的山川美景，大自然的鬼斧神工！"
                         data-url="https://social-platform.com/post/12345">
                        <i class="far fa-share-square"></i> 分享
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容卡片 2 -->
        <div class="content-card">
            <img src="https://picsum.photos/800/600?random=11" alt="美食照片" class="card-image">
            <div class="card-content">
                <div class="card-header">
                    <img src="https://picsum.photos/100/100?random=102" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <p class="user-name">美食家小李</p>
                        <p class="post-time">5小时前</p>
                    </div>
                </div>

                <h3 class="card-title">周末在家尝试做的意大利面，味道竟然出乎意料的好！</h3>
                <p class="card-text">分享一下我的独家配方，简单易学，在家也能做出餐厅级别的意大利面，赶紧学起来吧...</p>

                <div class="card-stats">
                    <div class="stat-item">
                        <i class="far fa-heart"></i> 186
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i> 42
                    </div>
                    <div class="stat-item share-btn" data-bs-toggle="modal" data-bs-target="#shareModal"
                         data-title="周末在家尝试做的意大利面，味道竟然出乎意料的好！"
                         data-url="https://social-platform.com/post/12346">
                        <i class="far fa-share-square"></i> 分享
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容卡片 3 -->
        <div class="content-card">
            <img src="https://picsum.photos/800/600?random=12" alt="科技产品照片" class="card-image">
            <div class="card-content">
                <div class="card-header">
                    <img src="https://picsum.photos/100/100?random=103" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <p class="user-name">科技测评师</p>
                        <p class="post-time">昨天</p>
                    </div>
                </div>

                <h3 class="card-title">最新款智能手机深度测评，这些功能让我惊艳！</h3>
                <p class="card-text">经过一周的深度使用，我对这款新手机有了全面了解，从性能到拍照，从续航到系统，全方位解析...</p>

                <div class="card-stats">
                    <div class="stat-item">
                        <i class="far fa-heart"></i> 529
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i> 134
                    </div>
                    <div class="stat-item share-btn" data-bs-toggle="modal" data-bs-target="#shareModal"
                         data-title="最新款智能手机深度测评，这些功能让我惊艳！"
                         data-url="https://social-platform.com/post/12347">
                        <i class="far fa-share-square"></i> 分享
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 分享表单模态框 -->
<div class="modal fade" id="shareModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-share-alt me-2"></i> 分享内容</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="shareForm">
                    <input type="hidden" id="shareUrl">

                    <div class="share-form-group">
                        <label class="share-form-label" for="shareComment">添加你的评论（可选）</label>
                        <textarea class="share-textarea" id="shareComment" placeholder="分享你的想法..."></textarea>
                        <div class="share-hint">0/140</div>
                    </div>

                    <div class="share-form-group">
                        <label class="share-form-label">分享预览</label>
                        <div class="share-preview">
                            <div class="share-preview-header">你的分享将显示为：</div>
                            <div class="share-preview-content" id="sharePreview">
                                <span id="previewComment"></span>
                                <br>
                                <span id="previewTitle" class="text-primary"></span>
                            </div>
                        </div>
                    </div>

                    <div class="share-form-group">
                        <label class="share-form-label">选择分享平台</label>
                        <div class="share-options">
                            <div class="share-option" data-platform="facebook">
                                <div class="share-icon share-facebook">
                                    <i class="fab fa-facebook-f"></i>
                                </div>
                                <div class="share-name">Facebook</div>
                            </div>
                            <div class="share-option" data-platform="twitter">
                                <div class="share-icon share-twitter">
                                    <i class="fab fa-twitter"></i>
                                </div>
                                <div class="share-name">Twitter</div>
                            </div>
                            <div class="share-option" data-platform="whatsapp">
                                <div class="share-icon share-whatsapp">
                                    <i class="fab fa-whatsapp"></i>
                                </div>
                                <div class="share-name">WhatsApp</div>
                            </div>
                            <div class="share-option" data-platform="copy">
                                <div class="share-icon share-copy">
                                    <i class="fas fa-link"></i>
                                </div>
                                <div class="share-name">复制链接</div>
                            </div>
                            <div class="share-option" data-platform="weibo">
                                <div class="share-icon share-weibo">
                                    <i class="fab fa-weibo"></i>
                                </div>
                                <div class="share-name">微博</div>
                            </div>
                            <div class="share-option" data-platform="wechat">
                                <div class="share-icon share-wechat">
                                    <i class="fab fa-weixin"></i>
                                </div>
                                <div class="share-name">微信</div>
                            </div>
                            <div class="share-option" data-platform="qq">
                                <div class="share-icon share-qq">
                                    <i class="fab fa-qq"></i>
                                </div>
                                <div class="share-name">QQ</div>
                            </div>
                            <div class="share-option" data-platform="email">
                                <div class="share-icon share-email">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div class="share-name">邮件</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmShareBtn">确认分享</button>
            </div>
        </div>
    </div>
</div>

<!-- 分享成功提示框 -->
<div class="share-toast" id="shareToast">分享成功！</div>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 获取DOM元素
		const shareModal = new bootstrap.Modal(document.getElementById('shareModal'));
		const shareUrlInput = document.getElementById('shareUrl');
		const shareTitleElement = document.getElementById('previewTitle');
		const shareCommentTextarea = document.getElementById('shareComment');
		const previewCommentElement = document.getElementById('previewComment');
		const shareHintElement = document.querySelector('.share-hint');
		const confirmShareBtn = document.getElementById('confirmShareBtn');
		const shareToast = document.getElementById('shareToast');
		const shareOptions = document.querySelectorAll('.share-option');
		let selectedPlatform = null;

		// 打开分享模态框时初始化数据
		document.querySelectorAll('.share-btn').forEach(btn => {
			btn.addEventListener('click', function () {
				const title = this.getAttribute('data-title');
				const url = this.getAttribute('data-url');

				// 重置表单
				shareUrlInput.value = url;
				shareTitleElement.textContent = title;
				shareCommentTextarea.value = '';
				previewCommentElement.textContent = '';
				shareHintElement.textContent = '0/140';
				selectedPlatform = null;

				// 重置选中状态
				shareOptions.forEach(option => {
					option.style.opacity = '1';
					option.style.transform = 'none';
				});
			});
		});

		// 评论输入字数限制
		shareCommentTextarea.addEventListener('input', function () {
			const maxLength = 140;
			let value = this.value;

			if (value.length > maxLength) {
				value = value.substring(0, maxLength);
				this.value = value;
			}

			shareHintElement.textContent = `${value.length}/${maxLength}`;
			previewCommentElement.textContent = value ? value + ' ' : '';
		});

		// 选择分享平台
		shareOptions.forEach(option => {
			option.addEventListener('click', function () {
				const platform = this.getAttribute('data-platform');

				// 更新选中状态
				if (selectedPlatform === platform) {
					// 取消选中
					selectedPlatform = null;
					this.style.opacity = '1';
					this.style.transform = 'none';
				} else {
					// 选中当前平台，取消其他平台选中状态
					selectedPlatform = platform;
					shareOptions.forEach(opt => {
						if (opt.getAttribute('data-platform') === platform) {
							opt.style.opacity = '0.8';
							opt.style.transform = 'scale(1.1)';
						} else {
							opt.style.opacity = '1';
							opt.style.transform = 'none';
						}
					});
				}
			});
		});

		// 确认分享
		confirmShareBtn.addEventListener('click', function () {
			if (!selectedPlatform) {
				alert('请选择一个分享平台');
				return;
			}

			const comment = shareCommentTextarea.value;
			const url = shareUrlInput.value;
			const title = shareTitleElement.textContent;

			// 根据不同平台执行不同的分享逻辑
			let message = '';
			switch (selectedPlatform) {
				case 'facebook':
					message = '分享到Facebook成功！';
					// 实际项目中这里会调用Facebook分享API
					console.log(`分享到Facebook: ${comment} ${title} ${url}`);
					break;
				case 'twitter':
					message = '分享到Twitter成功！';
					// 实际项目中这里会调用Twitter分享API
					console.log(`分享到Twitter: ${comment} ${title} ${url}`);
					break;
				case 'whatsapp':
					message = '分享到WhatsApp成功！';
					// 实际项目中这里会调用WhatsApp分享API
					console.log(`分享到WhatsApp: ${comment} ${title} ${url}`);
					break;
				case 'copy':
					message = '链接已复制到剪贴板！';
					// 复制链接到剪贴板，包含评论和标题
					const shareText = comment ? `${comment} ${title} ${url}` : `${title} ${url}`;
					navigator.clipboard.writeText(shareText);
					break;
				case 'weibo':
					message = '分享到微博成功！';
					// 实际项目中这里会调用微博分享API
					console.log(`分享到微博: ${comment} ${title} ${url}`);
					break;
				case 'wechat':
					message = '分享到微信成功！';
					// 实际项目中这里会调用微信分享API
					console.log(`分享到微信: ${comment} ${title} ${url}`);
					break;
				case 'qq':
					message = '分享到QQ成功！';
					// 实际项目中这里会调用QQ分享API
					console.log(`分享到QQ: ${comment} ${title} ${url}`);
					break;
				case 'email':
					message = '已打开邮件客户端！';
					// 打开邮件客户端
					const subject = encodeURIComponent(title);
					const body = encodeURIComponent(comment ? `${comment}\n${url}` : url);
					window.location.href = `mailto:?subject=${subject}&body=${body}`;
					break;
			}

			// 显示提示信息
			shareToast.textContent = message;
			shareToast.classList.add('show');

			// 关闭模态框
			shareModal.hide();

			// 3秒后隐藏提示信息
			setTimeout(() => {
				shareToast.classList.remove('show');
			}, 3000);
		});

		// 点赞功能
		const likeButtons = document.querySelectorAll('.stat-item .far.fa-heart');
		likeButtons.forEach(button => {
			button.addEventListener('click', function (e) {
				e.stopPropagation();
				const statItem = this.parentElement;
				const countText = statItem.textContent.trim();
				let count = parseInt(countText.split(' ')[1]);

				if (this.classList.contains('far')) {
					// 未点赞状态，点击后变为已点赞
					this.classList.remove('far');
					this.classList.add('fas', 'text-accent');
					statItem.innerHTML = `<i class="fas fa-heart text-accent"></i> ${count + 1}`;
				} else {
					// 已点赞状态，点击后取消点赞
					this.classList.remove('fas', 'text-accent');
					this.classList.add('far');
					statItem.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
				}
			});
		});
	});
</script>

    
